<template>
  <div class="yun-drag" ref="yun-echart"></div>
</template>
<script>
import axios from "axios";
export default {
  name: "EchartsLine",
  props: {
    option: {
      type: Object,
      default: () => {
        return {};
      },
    },
    echartOption: {
      type: Object,
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.drawLine();
    });
  },
  methods: {
    drawLine() {
      this.myChart = this.$echarts.init(this.$refs["yun-echart"]);
      let chartOption = JSON.parse(JSON.stringify(this.echartOption))
      let echartData = {};
      let option = {
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [],
      };
      option.title = chartOption.title;
      option.legend = chartOption.legend;
      option.grid = chartOption.grid;
      option.xAxis = chartOption.xAxis;
      option.yAxis = chartOption.yAxis;
      if (chartOption.dataSource == "json") {
        echartData = JSON.parse(chartOption.dataJson);
        if (option.xAxis.type == "category") {
          option.xAxis.data = echartData.axisData;
        } else {
          option.yAxis.data = echartData.axisData;
        }
        echartData.series &&
          echartData.series.forEach((element) => {
            let itemData = {
              type: "line",
              name: element.name,
              data: element.data,
              symbol: chartOption.symbol,
              symbolSize: chartOption.symbolSize,
              smooth: chartOption.smooth,
              label: chartOption.label,
            };
            if (chartOption.areaFlag) {
              itemData.areaStyle;
            }
            if (chartOption.stackFlage) {
              itemData.stack = chartOption.stack;
            }
            option.series.push(itemData)
          });
        this.myChart.setOption(option);
      }
      if (chartOption.dataSource == "api") {
        axios({
          methods: "get",
          url: chartOption.apiUrl,
        }).then((res) => {
           echartData=res.data.data 
          if (option.xAxis.type == "category") {
            option.xAxis.data = echartData.axisData;
          } else {
            option.yAxis.data = echartData.axisData;
          }
          echartData.series &&
            echartData.series.forEach((element) => {
              let itemData = {
                type: "line",
                name: element.name,
                data: element.data,
                symbol: chartOption.symbol,
                symbolSize: chartOption.symbolSize,
                smooth: chartOption.smooth,
                label: chartOption.label,
              };
              if (chartOption.areaFlag) {
                itemData.areaStyle;
              }
              if (chartOption.stackFlage) {
                itemData.stack = chartOption.stack;
              }
            });
          this.myChart.setOption(option);
        });
      }
    },
  },
  watch: {
    option: {
      handler: function () {
        this.myChart.resize();
      },
      deep: true,
    },
    echartOption:{
       handler: function () {
        this.drawLine()
      },
      deep: true,  
    }
  },
};
</script>
<style lang="less" scoped>
.yun-drag {
  width: 100%;
  height: 100%;
}
</style>
